<template>
	<!-- <StatusBar></StatusBar> -->
	<view class="bg">
		<image src="../../static/test2.png" mode="" class="img"></image>
	</view>
	
	<view class="main">
		<!-- <image src="../../static/huanghelou.png" mode="" class="main_img"></image> -->
		<view class="main_btn_box">
			<image src="../../static/huanghelou.png" mode=""  class="main_btn_img"></image>
			<button class="main_btn" @click="toRelease">
				足迹打卡
			</button> 
		</view>
		
		<view class="main_btn_box">
			<image src="../../static/dayanta.png" mode=""  class="main_btn_img"></image>
		<button class="main_btn" @click="toAI">
			关注动态
		</button>
		
		
		 </view>
		
		
		<view class="main_btn_box">
			<image src="../../static/jiefangbei.png" mode=""  class="main_btn_img"></image>
		<button class="main_btn" @click="toAI">
			AI导游
		</button>
		
		
		 </view>
		 
		 <button @click="toLogin">测试登录</button>
	</view>
	
</template>

<script setup lang="ts">
	const toAI=()=>{
		uni.navigateTo({
			url:'/pages/chat/chat'
		})
	}
	
	const toRelease=()=>{
		uni.navigateTo({
			url:'/pages/release/release'
		})
	}
	const toLogin=()=>{
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
</script>

<style scoped>
	.bg{
		width: 100%;
		height: 200px;
		/* background: url('../../static/test2.png'); */
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	.img{
		width: 100%;
		height: 100%;
		border-bottom-left-radius: 40px;
		border-bottom-right-radius: 40px;
	}
	
	.main_btn{
		width: 80%;
		background: #5f92ff;
		background: -webkit-linear-gradient(to right, #5f92ff 0%, #5f7eff 50%, #4f5baf 100%);
		background: linear-gradient(to right, #5f92ff 0%, #5f7eff 50%, #4f5baf 100%);
		border: none;
		color: #fff;
		padding: 10px 20px;
		border-radius: 30px;
		font-size: 1em;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		transition: all 0.3s ease;
		margin-bottom: 50px;
	}
	
	.main{
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		margin-top: 100px;
	}
	
	.main_img{
		width: 10%;
		
	}
	
	.main_btn_box{
		font-size: 20px;
		display: flex;
	}
	
	.main_btn_img{
		height: 70px;
		width: 70px;
		position: absolute;
		
		left: 35px;
		z-index: 999;
	}
</style>